<template>
	<div class="main-container-wrapper">
		<div class="tab-vans">
			<van-nav-bar title="我的待办" safe-area-inset-top fixed left-text="返回" left-arrow @click-left="back" />
			<div class="status-bar"></div>
			<van-tabs v-model:active="active" @change="changeTab">
				<van-tab title="我的待办"><van-search @search="onSearch" v-model="params.query" placeholder="请输入搜索关键字" /> </van-tab>
				<van-tab title="我的已办"><van-search @search="onSearch" v-model="params.query" placeholder="请输入搜索关键字" /> </van-tab>
			</van-tabs>
		</div>

		<van-pull-refresh v-model="refreshing" class="content" @refresh="onRefresh" ref="refreshBox">
			<van-list :immediate-check="false" v-model="loading" :finished="finished" :finished-text="list.length == 0 ? '' : '没有更多了'" @load="onLoad">
				<ListCard v-for="item in list" :datas="item" :key="item.id" @click="toDetail(item)" :bizTaskName="true">
					<template #time>
						<div class="time">
							<div>{{ active == 0 ? '派发时间：' : '办理时间：' }}{{ active == 0 ? item.orderTime : item.handleTime }}</div>
							<van-button v-if="active == 0" type="primary" size="mini" @click.stop="handleTransact(item)">办理</van-button>
						</div>
					</template>
				</ListCard>
				<van-empty description="暂无内容" v-if="list.length == 0 && !loading" />
			</van-list>
			<van-loading size="16px" v-if="loading && !refreshing">加载中...</van-loading>
			<van-back-top offset="500" />
		</van-pull-refresh>
	</div>
</template>
<script setup ts>
import ListCard from '/@/components/list-card/index.vue';
import { fetchList } from '/@/api/myTodo/index';
import { fetchList as myDoneList } from '/@/api/myDone/index';
const Router = useRouter();
const params = ref({
	current: 0,
	size: 10,
	query: '',
});
const refreshBox = ref();
const active = ref(0);
const loading = ref(false);
const refreshing = ref(false);

const finished = ref(false);
const list = ref([]);
const handleTransact = (item) => {
	Router.push({
		path: '/handle',
		query: {
			eventNum: item.eventNum,
			id: item.id,
			taskCode: item.bizTaskCode,
			eventProcessId: item.eventProcessId,
		},
	});
};
const toDetail = (row) => {
	Router.push({
		path: '/detail',
		query: {
			eventNum: row.eventNum,
			id: row.id,
		},
	});
};
const changeTab = () => {
	refreshBox.value.$el.scrollTop = 0;
	params.value.current = 0;
	params.value.query = '';
	finished.value = false;
	list.value = []; // 清空列表数据
	onLoad();
};
const onSearch = () => {
	refreshBox.value.$el.scrollTop = 0;
	params.value.current = 0;
	finished.value = false;
	list.value = []; // 清空列表数据
	onLoad();
};
const onRefresh = () => {
	params.value.current = 0;
	refreshing.value = true;
	finished.value = false;
	list.value = []; // 清空列表数据
	onLoad(); // 重新获取数据
};
const onLoad = () => {
	if (!loading.value) {
		loading.value = true;
		params.value.current += 1;
		if (active.value == 1) {
			myDoneList(params.value)
				.then((res) => {
					if (res.ok) {
						list.value = list.value.concat(res.data.records);
						finished.value = res.data.current >= res.data.pages;
					}
				})
				.finally(() => {
					refreshing.value = false;
					loading.value = false;
				});
		} else {
			fetchList(params.value)
				.then((res) => {
					if (res.ok) {
						list.value = list.value.concat(res.data.records);
						finished.value = res.data.current >= res.data.pages;
					}
				})
				.finally(() => {
					refreshing.value = false;
					loading.value = false;
				});
		}
	} else {
		return false;
	}
};

const back = () => {
	Router.back();
};
onMounted(() => {
	onLoad();
});
</script>
<style lang="scss" scoped>
.main-container-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 14px;
	background: #fff;

	.van-button {
		width: 60px;
	}

	.time {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.status-bar {
		height: 46px;
	}

	.tab-vans {
		z-index: 1;
		box-shadow: 0 3px 8px 0 #00000029;
	}

	.content {
		position: relative;
		height: calc(100% - 144px);
		padding: 10px 20px;
		margin-top: 1px;
		overflow-y: auto;
	}

	:deep(.van-loading) {
		width: 100%;
		padding: 10px;
		text-align: center;
	}
}
</style>
